<template>
	<div class='transform-plan-younger'>
		<TopNav
			:navName="course.bgMap.name"
			color="#00493E"
			showBack
			backColor="#01937C"
			:showTitle="false"
		/>
		<div class="container">
			<div class="step">
				<Step
					index="1"
					length="4"
					title="改造准备"
				>
					<StepsChild
						:role="role"
						:course="course"
					/>
				</Step>
			</div>
			<div class="step">
				<Step
					index="2"
					length="4"
					title="改造教学"
				>
					<Teaching
						:role="role"
						:course="course"
					/>
				</Step>
			</div>
			<div class="step">
				<Step
					index="3"
					length="4"
					title="常见改造问题"
				>
					<QA :course="course" />
				</Step>
			</div>
			<div class="step">
				<Step
					index="4"
					length="4"
					title="改造成果"
				>
					<div class="achievement">
						<!-- 上传分享 -->
						<div class="left">
							<div class="name">我的改造成果</div>
							<Button
								class="choose-file"
								width="300"
								height="300"
								bgColor="#FBFBFB"
								color="#00C9A9"
								border="3px solid #00C9A9"
								@click="shareModel=true"
							>
								<div
									v-if="!myAchievement"
								>
									<Iconfont
										name="icon-a-Group2"
										size="50"
										color="#00C9A9"
									/>
									<div style="margin-top: 21px;">上传分享</div>
								</div>
								<img
									v-else
									:src="myAchievement.url"
								>
							</Button>
						</div>
						<!-- 其他人成果 -->
						<div class="right">
							<div class="name">其他人成果</div>
							<Works :course="course" />
						</div>
					</div>
				</Step>
			</div>
		</div>
		<UploadAchievementModel
			v-if="shareModel"
			:courseId="id"
			@close="shareModel=false"
			@finish="initData"
		/>
	</div>
</template>

<script>
import { getCourse, getMyAchievement } from '@/api/course'
import StepsChild from '../components/StepsChild'
import Teaching from './components/Teaching'
import Works from '../components/Works'
import QA from '../components/QA'
import UploadAchievementModel from '../components/UploadAchievementModel'

export default {
  components: {
    StepsChild,
    Teaching,
    Works,
    QA,
    UploadAchievementModel
  },
  props: {
    role: {
      type: String,
      default: 'parent'
    }
  },
  data() {
    return {
      id: '',
      course: null,
      myAchievement: null,
      shareModel: false
    }
  },
  created() {
    this.id = this.$route.query.id
    this.initData()
  },
  methods: {
    initData() {
      this.course = getCourse(this.id)
      this.myAchievement = getMyAchievement(this.id)
      console.log(this.myAchievement)
    }
  }
}
</script>

<style lang='scss' scoped>
.transform-plan-younger {
  padding-top: 100px;
  background-color: #eff3f3;

  .container {
    padding: 54px 0 54px 100px;
    margin-top: -30px;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .step {
      margin-bottom: 70px;

      .achievement {
        display: flex;

        .name {
          margin-bottom: 20px;
          font-size: $sNormal;
          color: $primary1 !important;
        }

        .choose-file {
          font-size: $sLarger;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: $rSmall;
          }
        }
      }
    }
  }
}
</style>
